<template>
  <div>
    <TopNav title="城市列表"></TopNav>
    <van-index-bar :index-list="IndexList">
      <van-index-anchor index="#">当前城市</van-index-anchor>
      <van-cell :title="title" />
      <van-index-anchor index="热">热门城市</van-index-anchor>
      <van-cell v-for="(item, index) in hotList" :key="index - 4" :title="item.label" @click="getCurrent(item.label)" />
      <div v-for="(item, index) in AbcList" :key="index">
        <van-index-anchor :index="item">{{ item }}</van-index-anchor>
        <van-cell v-for="(i, index) in abcList(item)" :key="index" :title="i.label" @click="getCurrent(i.label)" />
      </div>
    </van-index-bar>
  </div>
</template>

<script>
import TopNav from '@/components/TopNav.vue'
import { getHotCity, getAllCity } from '@/api/article'
export default {
  data () {
    return {
      IndexList: [],
      AbcList: [],
      hotList: [],
      HotList: ['#', '热'],
      abcLists: [],
      title: '未知'
    }
  },
  computed: {
    abcList () {
      return function (value) {
        return this.abcLists.filter((i) => i.short[0].toUpperCase() === value)
      }
    }
  },
  components: {
    TopNav
  },
  async created () {
    const { body: bodyHot } = await getHotCity()
    this.hotList = bodyHot
    const { body: bodyAll } = await getAllCity()
    console.log(bodyAll)
    this.abcLists = bodyAll
    this.IndexList = this.HotList.concat([...new Set(bodyAll.map((item) => item.short).map((item) => item[0]))].sort()).map((item) => item.toUpperCase())
    this.AbcList = [...new Set(bodyAll.map((item) => item.short).map((item) => item[0]))].sort().map((item) => item.toUpperCase())
  },
  methods: {
    getCurrent (current) {
      localStorage.setItem('current', current)
      this.title = localStorage.getItem('current')
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .van-index-bar__index {
  margin: 4px 10px;
  padding: 2px 4px;
}

/deep/ .van-index-bar__index--active {
  color: #fff;
  background-color: RGB(33,185,122);
  border-radius: 50%;
}
</style>
